<template>
  <div class="edit-shop-sale-warpper">
    <el-form
      ref="ruleform"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-form-item label="修改方式：" label-width="84" class="sku-code-type">
          <el-radio-group v-model="form.skucode_type" v-removeAriaHidden>
            <el-radio v-for="item in pageInfo.typeArr" :key="item.value" :label="item.value" :class="item.value === 1 ? 'editTypeTwo' : ''">
              {{ item.label }}
              <el-input
                v-if="item.value === 0"
                v-model="form.delkeywords"
                type="textarea"
                maxlength="1000"
                placeholder="商品描述最多1000个字符"
              />
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <div style="display: flex;">
        <div style="width: 84px;" />
        <div style="flex: 1;">
          <el-row class="replace-keywords-row">
            <el-form-item
              v-for="(item, index) in form.replaceKeywords"
              :key="index"
              label="替换关键字："
              :prop="'domains' + index + 'value'"
            >
              <el-input
                v-model="item.replaceBefore"
                placeholder="输入内容"
                style="width: 240px;"
              />
              <span style="margin: 0 8px;">替换为-></span>
              <el-input
                v-model="item.replaceAfter"
                placeholder="输入内容"
                style="width: 240px;"
              />
              <span style="font-size: 24px; vertical-align: middle; margin-left: 12px;">
                <i v-if="index === 0" class="el-icon-circle-plus-outline" style="color: #4E78EF; cursor: pointer;" @click="addDomain" />
                <i v-else class="el-icon-remove-outline" style="color: #EE0000; cursor: pointer;" @click.prevent="removeDomain(item)" />
              </span>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="删除关键字：" prop="delkeywords" class="keywords-textarea" style="margin-bottom: 0;">
              <el-input
                v-model="form.delkeywords"
                type="textarea"
                placeholder="多个关键字用回车或者英文逗号分隔"
              />
            </el-form-item>
            <el-button @click="form.delkeywords = ''">清空</el-button>
          </el-row>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: {
        typeArr: [
          {
            label: '统一修改为',
            value: 0
          },
          {
            label: '自定义设置',
            value: 1
          }
        ]
      },
      form: {
        skucode_type: 0,
        new_title: '',
        replaceKeywords: [
          {
            replaceBefore: '',
            replaceAfter: ''
          },
          {
            replaceBefore: '',
            replaceAfter: ''
          }
        ],
        delkeywords: ''
      },
      rules: {}
    }
  },
  methods: {
    addDomain() {
      this.form.replaceKeywords.push({
        replaceBefore: '',
        replaceAfter: ''
      })
    },
    removeDomain(item) {
      var index = this.form.replaceKeywords.indexOf(item)
      if (index !== -1) {
        this.form.replaceKeywords.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.edit-shop-sale-warpper {
  .replace-keywords-row {
    ::v-deep {
      .el-form-item {
        &:first-of-type .el-form-item__label {
          opacity: 1;
        }
        .el-form-item__label {
          opacity: 0;
        }
      }
    }
  }
  .editTypeTwo {
    display: block;
    margin: 24px 0 10px;
  }
  .sku-code-type {
    ::v-deep {
      .el-radio {
        margin-top: 14px;
      }
      .el-radio,
      .el-radio__label {
        display: flex;
      }
      .el-textarea {
        margin-left: 18px;
        width: 800px;
      }
      .el-textarea__inner {
        height: 120px;
        background-color: #F7F8FA;
        border: none;
      }
    }
  }
  .keywords-textarea {
    ::v-deep {
      .el-textarea {
        width: 800px;
      }
      .el-textarea__inner {
        height: 80px;
        background-color: #F7F8FA;
        border: none;
      }
    }
  }
}
</style>
